<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/index.css" />
		<script src="../js/vue.js"></script>
		<script src="../js/elementui.js"></script>
	</head>
	<body>
		<div id="app">
			基础用法:<br />
			<template>
				<el-select v-model="value" placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</template>
			<hr />

			有禁用选项:<br />
			<template>
				<el-select v-model="value2" placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
						:disabled="item.disabled">
					</el-option>
				</el-select>
			</template>
			<hr />

			禁用状态:<br />
			<template>
				<el-select v-model="value3" disabled placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</template>
			<hr />

			可清空单选:<br />
			<template>
				<el-select v-model="value4" clearable placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</template>
			<hr />

			基础多选:<br />
			<template>
				<el-select v-model="value1_1" multiple placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>

				<el-select v-model="value1_2" multiple collapse-tags style="margin-left: 20px;" placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</template>
			<hr />

			自定义模板:<br />
			<template>
				<el-select v-model="value5" placeholder="请选择">
					<el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value">
						<span style="float: left">{{ item.label }}</span>
						<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
					</el-option>
				</el-select>
			</template>
			<hr />

			分组:<br />
			<template>
				<el-select v-model="value6" placeholder="请选择">
					<el-option-group v-for="group in options2" :key="group.label" :label="group.label">
						<el-option v-for="item in group.options" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-option-group>
				</el-select>
			</template>
			<hr />

			可搜索:<br />
			<template>
				<el-select v-model="value7" filterable placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</template>
			<hr />

			远程搜索:<br />
			<template>
				<el-select v-model="value8" multiple filterable remote reserve-keyword placeholder="请输入关键词"
					:remote-method="remoteMethod" :loading="loading">
					<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</template>
			<hr />

			创建条目:<br />
			<template>
				<el-select v-model="value9" multiple filterable allow-create default-first-option placeholder="请选择文章标签">
					<el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</template>
		</div>
	</body>

	<script>
		new Vue({
			el: "#app",
			data: {
				options: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				value: '',
				value2: '',
				value3: '',
				value4: '',
				value1_1: [],
				value1_2: [],
				cities: [{
					value: 'Beijing',
					label: '北京'
				}, {
					value: 'Shanghai',
					label: '上海'
				}, {
					value: 'Nanjing',
					label: '南京'
				}, {
					value: 'Chengdu',
					label: '成都'
				}, {
					value: 'Shenzhen',
					label: '深圳'
				}, {
					value: 'Guangzhou',
					label: '广州'
				}],
				value5: '',
				options2: [{
					label: '热门城市',
					options: [{
						value: 'Shanghai',
						label: '上海'
					}, {
						value: 'Beijing',
						label: '北京'
					}]
				}, {
					label: '城市名',
					options: [{
						value: 'Chengdu',
						label: '成都'
					}, {
						value: 'Shenzhen',
						label: '深圳'
					}, {
						value: 'Guangzhou',
						label: '广州'
					}, {
						value: 'Dalian',
						label: '大连'
					}]
				}],
				value6: '',
				value7: '',
				options3: [],
				value8: [],
				list: [],
				loading: false,
				states: ["Alabama", "Alaska", "Arizona",
					"Arkansas", "California", "Colorado",
					"Connecticut", "Delaware", "Florida",
					"Georgia", "Hawaii", "Idaho", "Illinois",
					"Indiana", "Iowa", "Kansas", "Kentucky",
					"Louisiana", "Maine", "Maryland",
					"Massachusetts", "Michigan", "Minnesota",
					"Mississippi", "Missouri", "Montana",
					"Nebraska", "Nevada", "New Hampshire",
					"New Jersey", "New Mexico", "New York",
					"North Carolina", "North Dakota", "Ohio",
					"Oklahoma", "Oregon", "Pennsylvania",
					"Rhode Island", "South Carolina",
					"South Dakota", "Tennessee", "Texas",
					"Utah", "Vermont", "Virginia",
					"Washington", "West Virginia", "Wisconsin",
					"Wyoming"
				],
				options4: [{
					value: 'HTML',
					label: 'HTML'
				}, {
					value: 'CSS',
					label: 'CSS'
				}, {
					value: 'JavaScript',
					label: 'JavaScript'
				}],
				value9: []
			},
			mounted() {
				this.list = this.states.map(item => {
					return {
						value: `value:${item}`,
						label: `label:${item}`
					};
				});
			},
			methods: {
				remoteMethod(query) {
					if (query !== '') {
						this.loading = true;
						setTimeout(() => {
							this.loading = false;
							this.options = this.list.filter(item => {
								return item.label.toLowerCase()
									.indexOf(query.toLowerCase()) > -1;
							});
						}, 200);
					} else {
						this.options = [];
					}
				}
			}
		})
	</script>

</html>